<template>
  <view class="top-box">
    <view class="status-bar" :style="{ top: statusBarHeight + 'px' }">
      <tm-icon :font-size="35" name="tmicon-angle-left"></tm-icon>
    </view>
    <view class="masking"></view>
    <image
      class="bg"
      :src="'http://upyun-cdn.hyunst.com/' + merchantData.merchantLogo"
      mode=""
    ></image>
    <view class="des">
      <view class="title">
        <text class="merchant-name">{{ merchantData.merchantName }}</text>
        <view class="star">
          <!-- <u-icon name="star-fill" color="#40a9ff" size="15"></u-icon -->
        </view>
        <text class="address">{{ merchantData.merchantAddress }}</text>

        <view class="logo">
          <image
            :src="'http://upyun-cdn.hyunst.com/' + merchantData.merchantLogo"
          />
        </view>
      </view>
      <view class="tip">
        <u-icon name="calendar-fill" color="#40a9ff" size="15"></u-icon>
        <text>哈哈哈</text>

        <view class="share">
          <u-icon name="share-square" color="#40a9ff" size="20"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, toRefs } from 'vue'

import type { MerchantInfo } from '@/type/merchant/merchant'
const emit = defineEmits([''])
const props = defineProps({
  merchantData: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const { merchantData } = toRefs(props)

const statusBarHeight = ref(0)

onMounted(() => {
  //获取状态栏高度
  statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight as number
})

/**
 * 返回上一级
 */
const backHandle = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.top-box {
  width: 100%;
  height: 100%;
  position: relative;

  .status-bar {
    width: 100%;
    height: 40px;
    position: absolute;
    z-index: 100;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20rpx;
  }

  .masking {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 1;
  }

  > .bg {
    width: 100%;
    height: 100%;

    position: absolute;
  }
  .des {
    width: 100%;
    height: 200rpx;
    background-color: #fff;
    box-sizing: border-box;
    padding: 15rpx 25rpx;
    padding-bottom: 5rpx;
    position: absolute;
    z-index: 1;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    border-bottom: 10rpx solid #eeeeee;
    bottom: -10rpx;

    .title {
      position: relative;

      .merchant-name {
        color: #303133;
        font-size: 0.9rem;
      }
      .star {
        font-size: 0.7rem;
      }
      .address {
        color: #909399;
        font-size: 0.75rem;
      }
      .logo {
        position: absolute;
        top: -50rpx;
        right: 0rpx;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 15rpx;
        }
      }
    }

    .tip {
      display: flex;
      align-items: center;
      position: relative;
      margin-top: 10rpx;

      > text {
        font-size: 0.8rem;
        color: #cccccc;
      }

      .share {
        position: absolute;
        right: 20rpx;
      }
    }
  }
}
</style>
